<template>
	<view class="sa_content">
		<!-- 返回，默认返回首页 -->
		<view class="sa_return">
			<image :src="HTTP_IMG_UTL+'fanhui.png'" style="width: 28rpx;height: 40rpx;" mode=""
				@click="handelReturn" />
			<view></view>
		</view>
		<!-- 认证您的身份 -->
		<view class="sa_imgs">
			<image :src="HTTP_IMG_UTL+'authentication_282@2x.png'" mode=""
				style="width:376rpx;height: 55rpx;" v-if="lang==='zh'" />
			<view v-if="lang==='ru'" style="font-size: 36rpx;font-weight: bold;">Подтверждение информации вашей компании
			</view>
			<view style="color: #404040;margin-top: 18rpx;" v-if="lang==='zh'">将获得智能助手，精准推送及专属图标</view>
			<view style="color: #404040;margin-top: 18rpx;" v-if="lang==='ru'">Получить виртуального помощника,
				push-уведомления и эксклюзивный значок</view>
		</view>
		<!-- form表单 -->
		<view class="au_form">
			<u-form labelPosition="top" :model="model" ref="uForm">
				<u-form-item :label="$t('车辆名称')" prop="car_name" :required="true">
					<u-input v-model="model.car_name" :placeholder="$t('请输入车辆名称')" clearable class="no_border" />
				</u-form-item>
				<u-form-item :label="$t('车辆类型')" prop="vehicle_types" :required="true">
					<view @click="handeleCardTitle">{{model.vehicle_types?model.vehicle_types:$t('请选择车辆类型')}}</view>
				</u-form-item>
				<u-form-item :label="$t('车牌号')" prop="license_number" :required="true">
					<u-input v-model="model.license_number" :placeholder="$t('请输入车牌号')" clearable class="no_border" />
				</u-form-item>
				<!--  -->
				<u-form-item :label="$t('车辆照片')+$t('请上传3张不同角度的车辆照片')" prop="car_image" :required="true">

					<u-upload :action="action" :file-list="list" :max-size="imageMaxSize" :max-count="car_max_count"
						:width="width_card" :height="height_card" :auto-upload="autoUpload"
						:show-upload-list="showUploadList" :del-bg-color="delBgColor" :del-color="delColor"
						:upload-text="uploadText_card" :limit-type="limitType" @on-success="onSuccessCar"
						@on-remove="onRemoveCar" :show-progress="showProgress" />
				</u-form-item>
				<u-form-item :label="$t('车辆尺寸')" >
					<view class="form_max_block">
						<view class="form_max">
							<u-input v-model="model.VehicleSize.CarCaptain" :placeholder="$t('请输入车长(m)')"
								class="no_border" />
						</view>
						<view class="form_max">
							<u-input v-model="model.VehicleSize.CarWidth" :placeholder="$t('请输入车宽(m)')"
								class="no_border" />
						</view>
						<view class="form_max">
							<u-input v-model="model.VehicleSize.CarHeight" :placeholder="$t('请输入车高(m)')"
								class="no_border" />
						</view>
					</view>
				</u-form-item>
				<u-form-item :label="$t('可载货重量（kg）')" prop="weight" :required="true">
					<u-input v-model="model.weight" :placeholder="$t('请输入数字')" clearable class="no_border" />
				</u-form-item>
				<u-form-item :label="$t('可载货体积（m³）')" prop="volume" :required="true">
					<u-input v-model="model.volume" :placeholder="$t('请输入数字')" clearable class="no_border" />
				</u-form-item>
				<u-form-item :label="$t('最大载货尺寸（选填）')" >
					<view class="form_max_block">
						<view class="form_max_block">
							<view class="form_max">
								<u-input v-model="model.CargoSize.CarCaptain" :placeholder="$t('请输入车长(m)')"
									class="no_border" />
							</view>
							<view class="form_max">
								<u-input v-model="model.CargoSize.CarWidth" :placeholder="$t('请输入车宽(m)')"
									class="no_border" />
							</view>
							<view class="form_max">
								<u-input v-model="model.CargoSize.CarHeight" :placeholder="$t('请输入车高(m)')"
									class="no_border" />
							</view>
						</view>
					</view>
				</u-form-item>
				<u-form-item :label="$t('常用运输路线')" :required="true">
					<view class="sa_StartingFrom">
						<view class="sa_nlock">
							<!-- <view>{{$t('请选择出发地')}}</view> -->
							<formCity :is_register="1" :item="cityItemStart" :is_port="true" @change="selCityStart" />
							<image :src="HTTP_IMG_UTL+'register_223@2x.png'" mode=""
								style="width: 20rpx;height: 12rpx;"></image>
						</view>
						<image :src="HTTP_IMG_UTL+'chufa_461@4x.png'" mode=""
							style="width: 40rpx;height: 20rpx;"></image>
						<view class="sa_nlock">
							<!-- <view>{{$t('请选择目的地')}}</view> -->
							<formCity :is_register="1" :item="cityItemEnd" :is_port="true" @change="selCityEnd" />
							<image :src="HTTP_IMG_UTL+'register_223@2x.png'" mode=""
								style="width: 20rpx;height: 12rpx;"></image>
						</view>
					</view>
				</u-form-item>
				<u-form-item :label="$t('驾驶证照片')" prop="card_image" :required="true">
					<view style="width: 100%;">
						<view class="sa_detail" v-if="lang==='ru'">
							Запишите видеоподтверждение, в котором вы произносите следующее: “Я - российский водитель. Хочу
							найти заказы на доставку грузов на платформе GLUZ и предлагаю свои услуги по перевозке, в связи
							с этим подаю заявку на подтверждение.”
						</view>
						<view>
							<u-upload v-if="lang==='zh'" :action="action" :file-list="list" :max-size="imageMaxSize"
								:max-count="max_count" :width="width" :height="height" :auto-upload="autoUpload"
								:show-upload-list="showUploadList" :del-bg-color="delBgColor" :del-color="delColor"
								:upload-text="uploadText" :limit-type="limitType" @on-success="onSuccess"
								@on-remove="onRemove" :show-progress="showProgress" />
						</view>
						<view v-if="lang==='ru'" style="margin-top: 68rpx;">
							<view style="width: 100%;display: flex;justify-content: center;">
								<formVideos :item="formItem" :postvideo="videoData" :postid="postId" @change="selVideos" />
							</view>
						</view>
					</view>
				</u-form-item>
			</u-form>
		</view>
		<view class="sa_but">
			<view class="but_left">
				<u-button @click="handelPreviouspage">{{$t('上一步')}}</u-button>
			</view>
			<view class="but_right">
				<u-button class="custom-style" @click="submit" :disabled="isDisabled" :loading="isLoading">{{$t('认证')}}</u-button>
			</view>
		</view>
		<!-- 底部弹窗 -->
		<u-picker v-model="iSshow" mode="selector" :range="CardTypes" :range-key="lang==='zh'?'name':'name_ru'"
			:confirm-text="$t('确定')" :cancel-text="$t('取消')" @confirm="handelConfirm" :default-selector="[carIndex]" />
		<view class="backColor"></view>
	</view>
</template>

<script>
	import {
		IMAGE_URL,
		HTTP_IMG_UTL
	} from "@/config/app";
	import formVideos from "./components/formVideos.vue";
	import formCity from "./components/formCity.vue";
	import {
		HTTP_REQUEST_URL,
		IMAGE_MAX_SIZE,
		IMAGE_MAX_COUNT
	} from '@/config/app';
	export default {
		components: {
			formVideos,
			formCity
		},
		data() {
			return {
				HTTP_IMG_UTL,
				isDisabled:false,
				isLoading:false,
				// 请选择出发地
				cityItemStart: {
					key: "city_id",
					label: false,
					placeholder: this.$t('出发地'),
					type: "city",
					required: true,
					value: [],
					rules: {},
				},
				// 请选择目的地
				cityItemEnd: {
					key: "city_id",
					label: false,
					placeholder: this.$t('目的地'),
					type: "city",
					required: true,
					value: [],
					rules: {},
				},
				// 视频参数配置
				formItem: {
					required: false,
					label: '',
					key: 'video',
					value: []
				},
				videoData: '', // 假设这是视频URL或相关数据
				postId: 0, // 假设这是商品或帖子的ID
				// ------------------------------------------------
				uploadText_card: '',
				width_card: '198',
				height_card: '198',
				border: 'none',
				//form表单
				model: {
					car_name: '', //车辆名称
					vehicle_type: '', //车辆类型
					vehicle_types:'',//车辆类型 显示使用
					license_number: '', //车牌号
					car_image: [], //车辆照片
					//车辆尺寸  CarCaptain车长 CarWidth:''车宽 CarHeight:''车高
					VehicleSize: {
						CarCaptain: '',
						CarWidth: '',
						CarHeight: ''
					},
					weight: '', //载货重量
					volume: '', //载货体积
					//最大载货尺寸 CarCaptain车长 CarWidth:''车宽 CarHeight:''车高
					CargoSize: {
						CarCaptain: '',
						CarWidth: '',
						CarHeight: ''
					},
					start: '', //常用运输路线出发地
					end: '', //常用运输路线目的地
					card_image: [], //驾驶证照片
					video: '', //驾驶证视频
				},
				rules: { //form表单校验
					car_name: [{
						required: true,
						message: this.$t('请输入车辆名称'),
						trigger: ['blur', 'change']
					}],
					vehicle_types: [{
						required: true,
						message: this.$t('请选择车辆类型'),
						trigger: ['blur', 'change']
					}],
					license_number: [{
						required: true,
						message: this.$t('请输入车牌号'),
						trigger: ['blur', 'change']
					}],
					car_image: [ {
						validator: (rule, value, callback) => {
							if (value.length < 3) {
								callback(new Error(this.$t('请上传3张不同角度的车辆照片')));
							} else {
								callback();
							}
						},
						trigger: ['blur', 'change']
					}],
					weight: [{ //车辆载重
						required: true,
						message: this.$t('请输入数字'),
						trigger: ['blur', 'change']
					}],
					volume: [{ //车辆体积
						required: true,
						message: this.$t('请输入数字'),
						trigger: ['blur', 'change']
					}],
					// card_image: [{
						
					// 	validator: (rule, value, callback) => {
					// 		if (value.length < 1) {
					// 			callback(new Error(this.$t('请上传驾驶证照片')));
					// 		} else {
					// 			callback();
					// 		}
					// 	},
					// 	trigger: ['blur', 'change']
					// }],
					
				},
				showProgress: false, //图片上传配置
				width: '412', //图片上传配置
				height: '212', //图片上传配置
				autoUpload: true, //图片上传配置
				showUploadList: true, //图片上传配置
				delBgColor: '#fa3534', //图片上传配置
				delColor: '#ffffff', //图片上传配置
				car_max_count: 3, //图片上传的最大数量
				max_count: 1, //图片上传的最大数量
				action: HTTP_REQUEST_URL + '/common/upload', //服务器上传地址
				imageMaxSize: IMAGE_MAX_SIZE, //图片上传配置
				imageMaxCount: IMAGE_MAX_COUNT, //图片上传配置
				uploadText: this.$t('请上传驾驶证照片'), //图片上传配置
				limitType: ['png', 'jpg', 'jpeg', 'webp', 'gif', 'image'], //图片上传配置
				clearable: false,
				value: '', //承接业务
				type: 'textarea',
				border: true,
				heights: 218,
				autoHeight: true,
				lang: 'zh',
				nowLang: 'zh', //获取协议接口使用的当前语言
				list: [], //默认显示的图片列表，数组元素为对象，必须提供url属性
				formDatas: '', //图片列表
				data: {},
				userid: "", //userid
				CardTypes: [], //车辆类型
				carIndex: 0, //车辆选择下标记录
				iSshow: false, //底部弹窗
				cardTitle: '', //选择车辆类型的name值
				cardId: '' ,//选择车辆类型的id
				userid:'',
			}
		},
		onLoad(option) {
			this.data = JSON.parse(option.data)
		},
		onShow() {
			this.nowLang = this.$i18n.locale
			// 获取当权语言
			this.getLang()
			// 获取车辆类型
			this.getCardType()
		},
		methods: {
			// 获取到视频
			selVideos(key, value) {
				this.model.video = value[0].url
			},
			// 认证
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						 if(this.model.start==''){
							uni.showToast({
								title: this.$t('请选择出发地'),
								icon: 'none',
								duration: 1000
							})
						}else if(this.model.end==''){
							uni.showToast({
								title: this.$t('请选择目的地'),
								icon: 'none',
								duration: 1000
							})
						} else if(this.lang==='ru'){
							if(this.model.video===''){
								uni.showToast({
									title: this.$t('请上传视频'),
									// title: '请上传驾驶证视频',
									icon: 'none',
									duration: 1000
								})
							}else{
								this.getNewProfile()
							}
						} else if(this.lang==='zh'){
							if(this.model.card_image.length == 0){
								uni.showToast({
									title: this.$t('请上传驾驶证照片'),
									// title: '请上传驾驶证视频',
									icon: 'none',
									duration: 1000
								})
							}else{
								this.getNewProfile()
							}
						}
					} else {
						// console.log('验证通过');
					}
				})
			},
			// 提交接口
			getNewProfile() {
				this.model.country = this.data.country //
				this.model.identity_id = this.data.identity_id //
				this.model.username = this.data.username //公司或用户名
				this.model.area_id = this.data.area_id //地区
				this.model.card_image = this.model.card_image.toString()  //驾驶证照片
				this.model.car_image = this.model.car_image.toString() //车辆照片
				this.model.user_id = this.userid //用户id
				this.model.vehicle_type = this.cardId  //车辆类型
				this.isDisabled = true
				this.isLoading = true
				this.$u.api.release.newProfile(this.model).then(res => {
					this.isDisabled = false
					this.isLoading = false
					// 给用户一个提示
					uni.showToast({
						title: this.$t('认证成功'),
						icon: 'none',
						duration: 1000
					})
					// 一秒后跳转到认证页面

					setTimeout(() => {
						uni.switchTab({
							url: '/pages/tabbar/index'
						})
					}, 1000)
				}).catch(err => {
					this.isDisabled = false
					this.isLoading = false
					uni.showToast({
						title: this.$t('认证失败'),
						icon: 'none',
						duration: 1000
					})
				})
			},
			// 点击请选择车辆类型
			handeleCardTitle() {
				this.iSshow = !this.iSshow
			},
			// 底部弹窗
			handelConfirm(e) {
				this.carIndex = e[0]
				this.cardId = this.CardTypes[e[0]].id
				if (this.lang === 'zh') {
					this.model.vehicle_types = this.CardTypes[e[0]].name
				} else {
					this.model.vehicle_types = this.CardTypes[e[0]].name_ru
				}

			},
			// 获取车辆类型
			getCardType() {
				let data = {
					type: 'release_transport',
					pid: '744',
					lang: this.lang
				}
				this.$u.api.basic.getActionSheetList(data).then(res => {
					this.CardTypes = res
				})
			},
			// 出发地
			selCityStart(key, value) {
				this.model.start = value[2].value
			},
			// 目的地
			selCityEnd(key, value) {
				this.model.end = value[2].value
			},
			// 返回上一页
			handelPreviouspage() {
				uni.navigateBack()
			},
			// 获取当权语言
			getLang() {
				// 获取缓存lang当前语言值
				uni.getStorage({
					key: 'lang',
					success: res => {
						if (res.data == 'zh') { //zh为中国，赋值0
							this.lang = 'zh'
						} else { //其他为俄罗斯，赋值1
							this.lang = 'ru'
						}
					}
				});
				uni.getStorage({
					key: 'user_id',
					success: res => {
						this.userid = res.data
					}
				});
			},
			// 返回上一页
			handelReturn() {
				uni.navigateBack()
			},
			// 车辆照片上传成功
			onSuccessCar(data, index, lists, name) {
				this.setFromData(lists)
				this.model.car_image = lists.map(item => item.response.data.url)
			},
			// 车辆照片删除图片
			onRemoveCar(index, lists, name) {
				this.setFromData(lists)
				this.model.car_image.splice(index, 1)
			},
			// 驾驶证上传成功
			onSuccess(data, index, lists, name) {
				this.setFromData(lists)
				this.model.card_image.push(lists[0].response.data.url)
			},
			// 驾驶证删除图片
			onRemove(index, lists, name) {
				this.setFromData(lists)
				this.model.card_image.splice(index, 1)
			},
			setFromData(lists) {
				let formData = [];
				if (lists.length > 0) {
					for (let i = 0; i < lists.length; i++) {
						if (lists[i].response) {
							let temp = {
								url: lists[i].response.data.url
							}
							formData.push(temp)
						} else if (lists[i].url) {
							let temp = {
								url: lists[i].url
							}
							formData.push(temp)
						}
					}
				} else {
					formData = []
				}
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	}
</script>

<style lang="scss" scoped>
	.backColor{
		width: 100%;
		height: 1202rpx;
		background: linear-gradient(180deg, #E1F8C7 -3%, rgba(255, 255, 255, 0.2) 56%);
		position: absolute;
		top: 0;
		z-index: -1;
	}
	.sa_detail {
		width: calc(100% - 60rpx);
		margin-top: 0rpx;
		font-size: 24rpx;
		color: #A4A4A4;
		line-height: 1.2;
	}

	.no_border {
		border: none;
	}

	.form_max_block {
		width: 100%;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.form_max {
		width: 216rpx;
		height: 76rpx;
		border-radius: 16rpx;
		border: 1rpx solid #D8D8D8;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
	}

	.sa_nlock {
		width: 46%;
		height: 76rpx;
		border: 1rpx solid #000000;
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 24rpx;
		padding: 0 30rpx 0 24rpx;
		color: #A4A4A4;
	}

	.sa_StartingFrom {
		width: 100%;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.au_form {
		width: calc(100% - 80rpx);
		margin-top: 100rpx;
	}

	.custom-style {
		background-color: #000000;
		color: #ffffff;
	}

	.but_left {
		width: 20%;
	}

	.but_right {
		width: 75%;
	}

	.sa_but {
		margin: 70rpx 0 70rpx 0;
		width: calc(100% - 60rpx);
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.sa_images {
		width: calc(100% - 60rpx);
		display: flex;
		justify-content: flex-start;
	}

	.sa_License_title {
		width: calc(100% - 60rpx);
		font-size: 28rpx;
		display: flex;
		justify-content: flex-start;
		font-weight: 600;
		margin-top: 30rpx;
	}

	.sa_sales {
		width: calc(100% - 60rpx);
		margin-top: 24rpx;
	}

	.sa_nationality_title {
		width: calc(100% - 60rpx);
		font-size: 28rpx;
		display: flex;
		justify-content: flex-start;
		font-weight: 600;
		margin-top: 60rpx;
	}

	.sa_imgs {
		margin-top: 18rpx;
		width: calc(100% - 60rpx);
		display: flex;
		flex-direction: column;
	}

	.sa_return {
		margin-top: 110rpx;
		width: calc(100% - 60rpx);
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.sa_content {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
</style>